<template>
    <div>
        <div class="crumbs">
            <div class="container" style="display: flex;justify-content: space-between;min-height: 800px;">
                <div class="content-show" style="width:100%;border: 1px solid #eee;">
                    <div style="line-height: 60px;font-size: 18px;font-weight:500;border-bottom: 1px dashed #eee;"><i class="el-icon-menu"/>中继器子列表</div>
                    <div class="handle-box" style="margin:10px 10px;">
                        <el-button type="primary" @click="addCount">新增</el-button>
                        <el-button type="success" @click="edit">修改</el-button>
                        <el-button type="danger" @click="delCount">删除</el-button>
                    </div>
                    <el-table
                            :data="tableData"
                            border
                            expand-on-click-node
                            stripe class="table"
                            @selection-change="handleSelectionChange"
                            ref="multipleTable"
                            style="width: 100%">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column
                                prop="id"
                                label="编号"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="repeaterName"
                                label="名称"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="primaryRepeater"
                                label="一级"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="secondaryRepeater"
                                label="二级"
                                align="center"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="threeRepeater"
                                label="三级"
                                align="center"
                        >
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 新增弹出框 -->
        <el-dialog :title="diologTitle" :visible.sync="addVisible" width="70%" >
            <el-form :model="form"  ref="Form" label-width="144px" class="limit-small" :rules="rules">
                <el-form-item label="链路名称"  class="limit-width" prop="linkName" >
                    <el-input v-model="form.linkName" style="width: 60%;"  placeholder="输入名称"></el-input>
                </el-form-item>
                <el-form-item label="链路层级" class="limit-width" >
                    <el-input v-model="form.primaryRepeater" style="width: 60%;"  placeholder="请输入一级链路" ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.secondaryRepeater" style="width: 60%;"placeholder="请输入二级链路"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="form.threeRepeater" style="width: 60%;"  placeholder="请输入三级级链路"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {addRepeaterLink,getRepeaterLinkList,updateRepeater,deleteRepeater} from '../../../api/index';
    import {famatDatesTimes,regNumber} from '../../common/com'
    export default {
        name: "repeaterManagement",
        data() {
            return {
                tableData:[],//表格数据
                multipleSelection: [],//当前行
                form: {
                    linkName:'',
                    primaryRepeater:'',//一级链路
                    secondaryRepeater:"",//二级链路
                    threeRepeater:''//三级链路
                },
                addVisible: false,
                isEditInfo: false,
                delVisible: false,
                diologTitle: '新增',
                rules:{
                    linkName :[{required: true, message: '请输入', trigger: 'blur'}],//编号
                },

            }
        },
        created() {
            this.getData();
        },
        methods:{
            //勾选选中当前行
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //点击行触发，选中或不选中复选框
            handleRowClick(row, column, event){
                this.$refs.multipleTable.toggleRowSelection(row);
            },
            //点击当前行选中当前行
            handleSelectionChangeTable(val){
                this.multipleSelection = val;
            },
            //时间格式化
            formatTime(row, column, cellValue, index){
                return famatDatesTimes(cellValue);
            },
            //获取数据以及分页
            getData(){
                getRepeaterLinkList({

                }).then((res) =>{
                    console.log(res.datas)
                    this.tableData=res.datas;
                    console.log(this.tableData)
                })
            },
            //保存
            save(){
                //修改后保存
                if (this.formValidate(this.form)) {
                        if (this.isEditInfo){
                            var postData = {
                                id:this.multipleSelection[0].id,
                                repeaterName:this.form.linkName,
                                primaryRepeater:this.form.primaryRepeater,//一级链路
                                secondaryRepeater:this.form.secondaryRepeater,//二级链路
                                threeRepeater:this.form.threeRepeater//三级链路
                            }
                            console.log(this.postData)
                            updateRepeater(postData).then((res) => {
                                if (res.success) {
                                    console.log(res.seccess)
                                    this.$message.success(`修改成功`);
                                    this.addVisible = false;
                                    this.getData();
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                            return;
                        }
                    //新增保存
                    addRepeaterLink({
                        repeaterName:this.form.linkName,
                        primaryRepeater:this.form.primaryRepeater,//一级链路
                        secondaryRepeater:this.form.secondaryRepeater,//二级链路
                        threeRepeater:this.form.threeRepeater//三级链路
                    }).then((res) =>{
                        console.log(res)
                        if(res.success){
                            this.addVisible = false;
                            this.$message.success(`添加成功`);
                            this.getData();
                        }else{
                            this.$message.error(res.message);
                        }
                    })
                }

            },
            //删除接口
            deleteRow(){
                deleteRepeater({
                    id:this.multipleSelection[0].id,
                }).then((res)=>{
                    console.log(res)
                    if(res.success){
                        this.$message.success('删除成功');
                        this.delVisible = false;
                        this.getData();
                    }else{
                        this.$message.error(res.message)
                    }
                })

            },
            //点击新增
            addCount(){
                this.addVisible = true;
                this.isEditInfo = false;
                this.diologTitle = '新增中继器';
                this.form= {
                    linkName:'',//中继器名称
                    primaryRepeater:'',//一级链路
                    secondaryRepeater:"",//二级链路
                    threeRepeater:''//三级链路
                }
            },
            //点击修改
            edit(){
                if(this.multipleSelection.length < 1){
                    this.$message.error('请选择需要修改的数据');
                }else
                    if(this.multipleSelection.length == 1){
                        console.log(this.multipleSelection)
                        this.addVisible = true;
                        this.isEditInfo = true;
                        this.diologTitle = '修改中继器';
                        this.form.linkName=this.multipleSelection[0].repeaterName;
                        this.form.primaryRepeater=this.multipleSelection[0].primaryRepeater;//一级链路
                        this.form.secondaryRepeater=this.multipleSelection[0].secondaryRepeater;//二级链路
                        this.form.threeRepeater=this.multipleSelection[0].threeRepeater;//三级链路
                    }else{
                        this.$message.error('一次只能修改一条数据');
                    }
            },
            //点击删除
            delCount(){
                if(this.multipleSelection.length < 1){
                    this.$message.error('请选择需要删除的数据');
                }else
                if(this.multipleSelection.length == 1){
                    this.delVisible = true;
                }else{
                    this.$message.error('一次只能修删除一条数据');
                }
            },
            //验证
            formValidate(formname) {
                console.log(formname)
               if (formname.linkName && formname.primaryRepeater && formname.secondaryRepeater && formname.threeRepeater){
                   if (!regNumber(formname.primaryRepeater)){
                       this.$message.error('一级链路只能为数字');
                       return false;
                   }
                   if (!regNumber(formname.secondaryRepeater)){
                       this.$message.error('二级链路只能为数字');
                       return false;
                   }
                   if (!regNumber(formname.threeRepeater)){
                       this.$message.error('三级链路只能为数字');
                       return false;
                   }
                   return true;
               } else{
                   if (!formname.linkName) {
                       this.$message.error('请输入名称');
                       return false;
                   }
                   if (!(parseInt(formname.primaryRepeater)>=0)) {
                       this.$message.error('请输入一级链路');
                       return false;
                   }
                   if (!(parseInt(formname.secondaryRepeater)>=0)) {
                       this.$message.error('请输入二级链路');
                       return false;
                   }
                   if (!(parseInt(formname.threeRepeater)>=0)) {
                       this.$message.error('请输入三级链路');
                       return false;
                   }
                   return true;
               }

                }
            }

    }
</script>

<style scoped>

</style>